<template>
  <div class="com-floor-contant padding-top-10">
    <div class="flex justify-between">
      <div class="floorLeft">
        <div class="titleBox flex align-center justify-between">
          <div>
            <div class="flex align-end">
              <div class="base-font-30 text-orange enLange text-bold">{{floorNum}}</div>
              <div class="base-font-30 text-orange enLange text-bold">F</div>
              <div class="base-font-20">{{title}}</div>
            </div>
          </div>
          <div>
            <div class="flex align-center justify-end base-font-12">
              <div class="menuMiniItem" v-for="(item,index) in miniMenuList" :key="index" v-if="index<8">
              <nuxt-link :to="{path:'/list',query: { name:title,index:index }}" @click.native="subBoxShow=false">{{item.name}}</nuxt-link>

              </div>
              <div class="menuMiniItem"><nuxt-link :to="{path:'/list',query: { name:title,index:0 }}" @click.native="subBoxShow=false">更多>></nuxt-link></div>
            </div>
          </div>
        </div>
        <div class="flex justify-between padding-top-10">
          <div>
            <div class="fourImg flex justify-between flex-wrap" v-if="fourList && fourList.length>0">
              <div class="fourImgItem" v-for="(item,index) in fourList" :key="index" @click="goDetail(item.id)">
                <div class="title">
                  <div class="ellipsis1">{{item.title}}</div>
                </div>
                <el-image :src="item.image" fit="cover"></el-image>
              </div>
            </div>
          </div>
          <div class="">
            <div class="fourImgRight" v-if="fourImgRightList.length>0">
              <div v-for="(item,index) in fourImgRightList" :key="index">
                <div class="fourImgeRightTop" v-if="index===0" @click="goDetail(item.id)">
                  <div class="base-font-18 text-bold ellipsis1">{{item.title}}</div>
                  <div class="base-font-14 text-999 ellipsis2 margin-top-10 ">{{item.description}}</div>
                </div>
                <div class="padding-top-10" v-if="index===0"></div>
                <div class=" flex align-center justify-between base-font-14 newInfoLine" @click="goDetail(item.id)"
                  v-else-if="index>0 && index < 7">
                  <div class="newInfo">
                    <div class="ellipsis1">{{item.title}}</div>
                  </div>
                  <div class="time">{{item.createTimeStr}}</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="flex align-center justify-between lxlcBox">
          <div v-for=" i in 5" class="lxlcBlock">
            <div class="lxlcBoxItem">
              <div class="circle"></div>
              <div class="">申请留学</div>
            </div>
          </div>
        </div>
        <!-- 专题专栏 -->
        <div class="flex margin-top-15">
          <div class="squareBox text-center base-font-18">
            {{ztTitleOne}}
          </div>
          <div class="squareIRightList text-666" v-if="ztListOne && ztListOne.length>0">
            <div class="flex align-center justify-between flex-wrap">
              <div class="squareIRightListItem" v-for="(item,index) in ztListOne" :key="index" @click="goDetail(item.id)">
                <div class=" squareIRightListItemBlock padding-bottom-7 margin-bottom-7" :class="i<3?'hasLine':''">
                  <div class="ellipsis1">{{item.title}}</div>
                  <div class="flex align-center margin-top-5">
                    <i class="el-icon-view text-999"></i>
                    <span class="text-999 base-font-12 margin-left-5">{{item.browseNum || 0}}</span>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>
        <div class="flex margin-top-10 align-center">
          <div class="squareBox2 text-center base-font-18">
             {{ztTitleTwo}}
          </div>
          <div class="squareIRightList text-666" v-if="ztListTwo && ztListTwo.length>0">
            <div class="flex align-center justify-between flex-wrap">
              <div class="squareIRightListItem" v-for="(item,index) in ztListTwo" :key="index" @click="goDetail(item.id)">
                <div class=" squareIRightListItemBlock padding-bottom-7 margin-bottom-7" :class="i<3?'hasLine':''">
                  <div class="ellipsis1">{{item.title}}</div>
                  <div class="flex align-center margin-top-5">
                    <i class="el-icon-view text-999"></i>
                    <span class="text-999 base-font-12 margin-left-5">{{item.browseNum || 0}}</span>
                  </div>
                </div>

              </div>

            </div>
          </div>
        </div>

      </div>
      <div class="floorRight">
        <div class="rightAdImg pointer" v-for="(item,index) in syyyList" :key="index" v-if="index<2" @click="goDetail(item.operateParams)"><el-image :src="item.files"
            fit="cover"></el-image></div>
        <div class="flex align-center rightMenuTitle justify-between margin-top-10">
          <div class="base-font-16 text-666">{{rightTitle}}</div>
          <div>
            <div class="newsMenu flex align-center ">
              <div class="newsMenuItem" @click="lxHotMenu(index)" :class="hotMenuIndex===index?'checked':''"
                v-for="(item,index) in hotMenuList" :key="index" v-if="index<3">{{item.name}}</div>

            </div>
          </div>
        </div>
        <div class="margin-tb-10">
          <div class="" v-for="(item,index) in rightList" :key="index">
            <div class="flex align-center margin-tb-10 pointer" v-if="index===0" @click="goDetail(item.id)">
              <div class="hotNewsImg "> <el-image :src="item.image" fit="cover"></el-image></div>
              <div class="padding-left-10">
                <div class="ellipsis2 text-999 ">{{item.title}}</div>
              </div>
            </div>
            <div class="flex align-center justify-between hotNewsItem text-666 base-font-14 pointer" v-else @click="goDetail(item.id)">
              <div class="label"></div>
              <div>
                <div class="ellipsis1">{{item.title}}</div>
              </div>
              <div class="time">01-19</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapActions,
    mapMutations
  } from 'vuex'

  export default {
    props: {
      floorNum: {
        type: String,
        default: "1"
      },
      title: {
        type: String,
        default: ""
      },
      rightTitle: {
        type: String,
        default: ""
      },
      ztTitle: {
        type: String,
        default: ""
      },
      syyyList: {
        type: Array,
        default: function() {
          return []; // 正确：返回一个数组作为默认值
        }
      },
      leftList: {
        type: Array,
        default: function() {
          return []; // 正确：返回一个数组作为默认值
        }
      }
    },
    data() {
      return {
        miniMenuList: [],
        fourList: [],
        fourImgRightList: [],
        rightList: [],

        hotMenuList: [

        ],
        hotMenuIndex: 0,
        ztTitleOne:'',
        ztTitleTwo:'',
        ztListOne:[],
        ztListTwo:[],

      }
    },
    computed: {
      ...mapState({
        menuListData: (state) => state.webData.menuListData,
      }),
    },
    mounted() {
      this.$nextTick(() => {
        if (this.menuListData && this.menuListData.length > 0) {
          this.menuListData.forEach((item, index) => {
            if (item.name === this.title) {
              this.miniMenuList = item.list
              this.miniMenuList.push({
                id: 1,
                title: '更多>>',
                type: 'more'
              })
            }
            if (item.name === this.rightTitle) {
              this.hotMenuList = item.list
              this.getList()

            }
            if(item.name === this.ztTitle){

                if(item.list.length>0){
                  if(item.list[0].name){
                    this.ztTitleOne=item.list[0].name
                    this.showList(item.list[0].name,4,'ztListOne')
                  }
                  if(item.list[1].name){
                    this.ztTitleTwo=item.list[1].name
                    this.showList(item.list[1].name,2,'ztListTwo')
                  }
                }





            }

          })
        }

        if (this.leftList.length > 0) {
          this.fourList = []
          this.leftList.forEach((item, index) => {
            if (index < 4) {
              this.fourList.push(item)
            } else {
              this.fourImgRightList.push(item)
            }
          })

        }
      })


    },
    methods: {
      lxHotMenu(index) {
        this.hotMenuIndex = index
        this.getList()
      },
      getList() {
        this.list = []
        this.$selectArticlePage({
          pageSize: 12,
          pageNum: 1,
          labelName: this.hotMenuList[this.hotMenuIndex].name,
        }).then((res) => {
          if (res.code === 0) {
            this.rightList = res.data
          }

        })
      },
      showList(name,num,listName){
        this.$selectArticlePage({
          pageSize:num || 2,
          pageNum: 1,
          labelName: name,
        }).then((res) => {

          if (res.code === 0) {
            this[listName]=res.data

          }
          else{
             this[listName]=[]
          }

        })
      },
      goDetail(id) {
        this.$router.push({
          path: '/detail',
          query: {
            id: id,
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .floorLeft {
    width: 880px;
    height: auto;

    .titleBox {
      height: 46px;
      border-bottom: 1px solid #caccd4;
    }
  }

  .floorRight {
    width: 280px;
    height: auto;
  }

  .menuMiniItem {
    margin-left: 15px;
    color: #959595
  }

  .newInfoLine {
    cursor: pointer;

    &:hover {
      font-weight: bold;
      color: #ef9b76;
    }
  }

  .fourImg {
    width: 410px;

    .fourImgItem {
      width: 200px;
      height: 135px;
      margin-top: 10px;
      position: relative;
      overflow: hidden;
      cursor: pointer;

      .title {
        width: 100%;
        padding: 0 5px;
        position: absolute;
        height: 30px;
        line-height: 30px;
        background: rgba(0, 0, 0, 0.6);
        left: 0;
        bottom: 0;
        font-size: 13px;
        color: #FFFFFF;
        z-index: 99;
        box-sizing: border-box;
      }

      el-image {
        width: 200px;
        height: 135px;
      }

      .el-image {
        width: 200px;
        height: 135px;
        transform: scale(1);
        -webkit-transform: scale(1);
        transition: transform 0.4s linear;
        -webkit-transition: transform 0.4s linear;

        &:hover {
          transform: scale(1.2);
          -webkit-transform: scale(1.2);
          transition: transform 0.4s linear;
          -webkit-transition: transform 0.4s linear;
        }
      }

      img {
        width: 200px;
        height: 135px;
      }
    }

  }

  .fourImgRight {
    height: 280px;
    width: 450px;
    padding-top: 10px;
    box-sizing: border-box;

    .fourImgeRightTop {
      padding-bottom: 15px;
      border-bottom: 1px dotted #e6e6e6;
    }

    .newInfo {
      width: 330px;
      height: 30px;
      line-height: 30px;
    }

    .time {
      font-size: 12px;
      color: #999999;
      width: 70px;
      text-align: right;
    }
  }

  .floorRight {
    width: 285px;

    .rightAdImg {
      width: 285px;
      height: 80px;
      margin-top: 10px;
      overflow: hidden;


      .el-image {
        width: 285px;
        height: 80px;
        transform: scale(1);
        -webkit-transform: scale(1);
        transition: transform 0.4s linear;
        -webkit-transition: transform 0.4s linear;
        &:hover{
          transform: scale(1.2);
          -webkit-transform: scale(1.2);
          transition: transform 0.4s linear;
          -webkit-transition: transform 0.4s linear;
        }
      }
    }

    .rightMenuTitle {
      width: 285px;
    }

    .newsMenu {
      height: 30px;
      margin-bottom: 8px;
      color: #757575;

      .newsMenuItem {
        height: 30px;
        line-height: 30px;
        border: 1px solid #f0f0f0;
        padding: 0 10px;
        background: #f6f6f6;
        cursor: pointer;

        &.checked {
          background: #ef9b76;
          color: #FFFFFF;
          border-color: #ef9b76;
        }
      }
    }
  }

  .hotNewsItem {
    height: 30px;
    line-height: 30px;

    .label {
      width: 3px;
      height: 3px;
      background: #ccc;
      flex-shrink: 0;
      margin-right: 7px;
    }

    .time {
      width: 50px;
      text-align: right;
      flex-shrink: 0;
    }
  }

  .hotNewsImg {
    width: 80px;
    height: 58px;

    .el-image {
      width: 80px;
      height: 58px;
    }
  }

  .lxlcBox {
    width: 100%;
    height: 60px;
    margin-top: 20px;

    .lxlcBlock {
      flex-grow: 1;

      .lxlcBoxItem {
        border-bottom: 1px solid #caccd4;
        padding: 0 20px 25px 20px;
        position: relative;
        text-align: center;

        .circle {
          width: 14px;
          height: 14px;
          border: solid 1px #caccd4;
          border-radius: 50%;
          position: absolute;
          left: calc(50% - 8px);
          bottom: -8px;
          background: #FFFFFF;
        }

        &:hover {
          color: #ef9b76;

          .circle {
            border: solid 1px #ef9b76;
            bottom: -8px;
            background: #ef9b76;
          }
        }
      }


    }

  }

  .squareBox {
    width: 100px;
    height: 100px;
    color: #333;
    line-height: 100px;
    text-align: center;
    background: #e6f5ff;
    flex-shrink: 0;
  }

  .squareIRightListItem {
    padding-left: 20px;
    box-sizing: border-box;
    flex-grow: 2;
    width: 390px;

    .squareIRightListItemBlock {
      width: 370px;

      &.hasLine {
        border-bottom: 1px solid #f0f0f0;
      }
    }
  }

  .squareBox2 {
    width: 100px;
    height: 65px;
    background: #f4f3ec;
    line-height: 65px;
  }
</style>
